$(function () {
    // 定义一个查询参数的对象 将来请求数据的时候
    // 需要将请求参数对象传到服务器中
    var objParams = {
        curPage: 1,     // 页码值 默认请求第一页数据
        pageSize: 2,    // 每页显示多少条数据 默认每页显示2条
        cate_id: null,  // 文章分类的 Id
        state: null     // 文章的状态，可选值有：已发布、草稿
    }

    getArticleList();
    getArticleCateList();

    /********* 为筛选表单绑定 submit 提交事件 *********/
    $('#form-search').on('submit', function (e) {
        e.preventDefault();
        // 获取表单中选定项的值
        var cate_id = $('[name=cate_id]').val();
        var state = $('[name=state]').val();
        // 为查询参数对象 objParams 中的属性赋值
        objParams.cate_id = cate_id;
        objParams.state = state;
        // 根据最新的筛选条件 重新渲染表格中的数据
        getArticleList();
    });

    /***************** 删除文章数据 *****************/
    // 通过 代理 的方式给 btn-delete 按钮 绑定提交事件
    $('tbody').on('click', '.btn-delete', function () {
        // 获取页面删除按钮的个数
        // 这里不能用 id 属性 因为 id 是唯一的
        var len = $('.btn-delete').length;
        var id = $(this).attr('data-id');
        var indexDelete = layui.layer.confirm('确定删除？', { icon: 3, title: '提示' }, function (index) {
            // 发起 ajax 请求获取数据
            $.ajax({
                type: "GET",
                url: "/my/article/delete/" + id,
                success: function (res) {
                    layui.layer.msg(res.message);
                    // 如果删除成功  
                    if (res.status == 0) {
                        // 当数据删除完成后 需要判断当前页中是否还有数据
                        // 如果没有剩余数据 则让页码值 -1 之后 再刷新页面
                        if (len == 1) {
                            // 表明删除完毕后页面上就没有数据了
                            // 页码值最小必须为 1
                            objParams.curPage = objParams.curPage == 1 ? 1 : objParams.curPage - 1;
                        }
                        // 刷新页面
                        getArticleList();
                    }
                }
            });
            layer.close(indexDelete);
        });
    });
    /***************** 编辑文章数据 *****************/
    // 通过 代理 的方式给 btn-edit 按钮 绑定提交事件
    $('tbody').on('click', '.btn-edit', function () {
        var id = $(this).attr('data-id');
        location.href = '/article/art_pub.html?btn=editArticle&id=' + id;
    });
    /***************** 函数定义区 *******************/

    // 获取文章的列表数据
    function getArticleList() {
        $.ajax({
            type: "GET",
            url: "/my/article/list",
            data: objParams,
            success: function (res) {
                layui.layer.msg(res.message);
                // 如果获取成功  
                if (res.status == 0) {
                    console.log(res);
                    // 使用模板引擎渲染页面数据
                    var htmlStr = template('tpl-table', res);
                    $('tbody').html(htmlStr);
                    // 渲染分页
                    reanderPage(res.total);
                }
            }
        });
    }

    // 定义一个美化时间的过滤器
    template.defaults.imports.dateFormat = function (date) {
        const dt = new Date(date);

        var year = padZero(dt.getFullYear());
        var month = padZero(dt.getMonth() + 1);
        var day = padZero(dt.getDay());

        var hour = padZero(dt.getHours());
        var minute = padZero(dt.getMinutes());
        var second = padZero(dt.getSeconds());

        return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
    }

    // 定义补零的函数
    function padZero(n) {
        return n > 9 ? n : '0' + n;
    }
    // 获取文章分类列表
    function getArticleCateList() {
        $.ajax({
            type: "GET",
            url: "/my/artcate/cates",
            success: function (res) {
                // layui.layer.msg(res.message);
                // 如果获取成功  
                if (res.status == 0) {
                    // 第一个参数传入 id 不需要加 #
                    var htmlStr = template('tpl-cates', res);
                    $('[name=cate_id]').html(htmlStr);
                    layui.form.render();
                }
            }
        });
    };
    // 定义分页功能函数
    function reanderPage(total) {
        // 调用 laypage.render() 方法实现分页
        layui.laypage.render({
            //指向存放分页的容器，值可以是容器ID、DOM对象。如：
            // 1. elem: 'id' 注意：这里不能加 # 号 
            // 2. elem: document.getElementById('id')
            elem: 'pageBox',
            // 数据总数。一般通过服务端得到
            count: total,
            // 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
            limit: objParams.pageSize,
            // 起始页。一般用于刷新类型的跳页以及HASH跳页。
            curr: objParams.curPage,
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            limits: [2, 3, 5, 10],
            // 当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
            // 触发 jump 回调的方式有两种：
            // 1.点击页码的时候 会触发 jump 回调 此时 first 为 undefined
            // 2.只要调用了 layui.laypage.render() 方法就会触发 jump 回调 此时 first 为 true
            jump: function (obj, first) {
                // 把最新的页码值赋值给 objParam 对象中
                objParams.curPage = obj.curr;
                objParams.pageSize = obj.limit;
                //首次不执行
                if (!first) {
                    // 根据最新的筛选条件 重新渲染表格中的数据
                    getArticleList();
                }
            }
        });
    };
});

